<template>
  <div>
    <div class="map1">
      <baidu-map
        @ready="handler"
        style="height:1080px"
        @click="getClickInfo"
        :scroll-wheel-zoom="true"
      ></baidu-map>
    </div>
    <div class="right1">
      <Card style="margin:10px">
        <realtime></realtime>
      </Card>
      <Card style="margin:10px">
        <Echarts></Echarts>
      </Card>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import Echarts from "./../components/track_display/echarts"
import realtime from "./../components/track_display/real_time"
export default {
  data() {
    return {};
  },
  components: {
    Echarts,
    realtime
  },
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(116.807039, 39.960297);
      map.centerAndZoom(point, 18);
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: "Red",
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: "Red",
        fillColor: "#f03"
      });
      map.addOverlay(circle);
    },
    getClickInfo(e) {
      console.log(e.point.lng);
      console.log(e.point.lat);
    }
  }
};
</script>

<style scoped>
.map1 {
  height: 100vh;
  width: 40%;
  background-color: #dddddd;
  float: left;
}
.right1 {
  width: 60%;
  /* background-color: gray; */
  float: right;
}
</style>